<template>
    <div class="container">
        <div style="height:50px;">
					<div class="dis_in_bl font18">成本管理</div>
				</div>
        <el-row style="margin-top:2px;">
            <el-col :span="7">
                <el-date-picker
                            v-model="Time"
                            style="height: 40px"
                            type="monthrange"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker
                    >
            </el-col><el-button
                type="primary"
                @click="add"
                style="float:right; margin-right: 10px"
            >搜索</el-button>
              <el-button
                type=""
                @click="cz"
                style="float:right; margin-right: 10px"
            >重置</el-button>
            
        </el-row>
        <div class="ecarlist">
            <div class="ecarlist_cen">
                <div id="chart_example" ref="Histogram" style="width: 100%; height: 240px"></div>
            </div>
            <div class="ecarlist_cen">
                 <div id="chart_example2" ref="Histogram2" style="width: 100%; height: 240px"></div>
            </div>
        </div>
        <div class="ecarlist">
            <div class="ecarlist_cen">
                 <div id="chart_example3" ref="Histogram3" style="width: 100%; height: 240px"></div>
            </div>
            <div class="ecarlist_cen">
                 <div id="chart_example4" ref="Histogram4" style="width: 100%; height: 240px"></div>
            </div>
        </div>
           <el-row style="margin-top:2px;">
            <el-col :span="7">
            </el-col><el-button
                type="primary"
                @click="download"
                style="float:right; margin-right: 10px"
            >导出</el-button>
            
        </el-row>
         <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="种苗成本" name="种苗成本">
                <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="productName" sortable label="品名"></el-table-column>
                    <el-table-column prop="batch" sortable label="订单号"></el-table-column>
                    <el-table-column prop="num" sortable label="数量">
                        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
                    </el-table-column>
					<el-table-column prop="createtime" sortable label="购买时间"></el-table-column>
                    	<el-table-column prop="createtime" sortable label="单价（元/k g）"></el-table-column>
                        	<el-table-column prop="createtime" sortable label="订单金额（元）"></el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="肥料成本" name="肥料成本">
              
               <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="productName" sortable label="品名"></el-table-column>
                    <el-table-column prop="batch" sortable label="订单号"></el-table-column>
                    <el-table-column prop="num" sortable label="数量">
                        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
                    </el-table-column>
					<el-table-column prop="createtime" sortable label="购买时间"></el-table-column>
                    	<el-table-column prop="createtime" sortable label="单价（元/k g）"></el-table-column>
                        	<el-table-column prop="createtime" sortable label="订单金额（元）"></el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize2" @current-change="handleCurrentChange2" :total="total2" :current-page.sync="currentPage2" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
               <el-tab-pane label="农药成本" name="农药成本">
              
               <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="productName" sortable label="品名"></el-table-column>
                    <el-table-column prop="batch" sortable label="订单号"></el-table-column>
                    <el-table-column prop="num" sortable label="数量">
                        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
                    </el-table-column>
					<el-table-column prop="createtime" sortable label="购买时间"></el-table-column>
                    	<el-table-column prop="createtime" sortable label="单价（元/k g）"></el-table-column>
                        	<el-table-column prop="createtime" sortable label="订单金额（元）"></el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize3" @current-change="handleCurrentChange3" :total="total3" :current-page.sync="currentPage3" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
                 <el-tab-pane label="其他成本" name="其他成本">
              
               <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="productName" sortable label="品名"></el-table-column>
                    <el-table-column prop="batch" sortable label="订单号"></el-table-column>
                    <el-table-column prop="num" sortable label="数量">
                        <template slot-scope="scope">{{scope.row.number}}{{scope.row.units}}</template>
                    </el-table-column>
					<el-table-column prop="createtime" sortable label="购买时间"></el-table-column>
                    	<el-table-column prop="createtime" sortable label="单价（元/k g）"></el-table-column>
                        	<el-table-column prop="createtime" sortable label="订单金额（元）"></el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize4" @current-change="handleCurrentChange4" :total="total4" :current-page.sync="currentPage4" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
	// import axios from "axios"
    import * as echarts from 'echarts';
    import { inputs_getCostTable } from "@/request/breedApi"
export default {
    data() {
        return {
		 Time: ['', ''],
           timms: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            nums: [995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356],
             activeName: '种苗成本',
             tableData: [],
               total1: 0,
                currentPage1:1,
                pagesize1:10,
                total2: 0,
                currentPage2:1,
                pagesize2:10,
                 total3: 0,
                currentPage3:1,
                pagesize3:10,
                 total4: 0,
                currentPage4:1,
                pagesize4:10,
                id:'',
        };
    },
    created() {

    },
    mounted() {
      this.initData() 
      this.initData2() 
      this.initData3() 
      this.initData4() 
      this.id = localStorage.getItem('companyId')
      this.tellbe()
    },
    destroyed: function () {

    },
    methods: {
	 // 柱状图
        initData() {
            let this_ = this;
            let myEchart = echarts.init(document.getElementById('chart_example'));
            let option = {
                color: ['#3BA1FF'], //柱体颜色
                 title: {
    text: '种苗成本统计',
 
  },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this_.timms,
                        axisLine: { show: false }, //轴线不显示
                        axisTick: {
                            alignWithLabel: false
                        },
                        axisLabel: {
                            interval: 0, //底部完整显示
                            textStyle: {
                                //修改底部字体颜色
                                color: '#999999'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        show: true, //隐藏y方向刻度
                        type: 'value',
                        textStyle: {
                            color: '#999999'
                        }
                    }
                ],
                series: [
                    {
                        name: '录入信息',
                        type: 'bar',
                        barWidth: '50%',
                        data: this_.nums,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: '#3BA1FF',
                                        fontSize: 8
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            // 绘制图表
            //   this.myChart = this.$echarts.init(this.$refs.Histogram2);

            myEchart.setOption(option);
            //   myChart.setOption(option);
        },
         initData2() {
            let this_ = this;
            let myEchart = echarts.init(document.getElementById('chart_example2'));
            let option = {
                color: ['#3BA1FF'], //柱体颜色
                 title: {
    text: '肥料成本统计',
 
  },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this_.timms,
                        axisLine: { show: false }, //轴线不显示
                        axisTick: {
                            alignWithLabel: false
                        },
                        axisLabel: {
                            interval: 0, //底部完整显示
                            textStyle: {
                                //修改底部字体颜色
                                color: '#999999'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        show: true, //隐藏y方向刻度
                        type: 'value',
                        textStyle: {
                            color: '#999999'
                        }
                    }
                ],
                series: [
                    {
                        name: '录入信息',
                        type: 'bar',
                        barWidth: '50%',
                        data: this_.nums,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: '#3BA1FF',
                                        fontSize: 8
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            // 绘制图表
            //   this.myChart = this.$echarts.init(this.$refs.Histogram2);

            myEchart.setOption(option);
            //   myChart.setOption(option);
        },
         initData3() {
            let this_ = this;
            let myEchart = echarts.init(document.getElementById('chart_example3'));
            let option = {
                color: ['#3BA1FF'], //柱体颜色
                 title: {
    text: '农药成本统计',
 
  },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this_.timms,
                        axisLine: { show: false }, //轴线不显示
                        axisTick: {
                            alignWithLabel: false
                        },
                        axisLabel: {
                            interval: 0, //底部完整显示
                            textStyle: {
                                //修改底部字体颜色
                                color: '#999999'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        show: true, //隐藏y方向刻度
                        type: 'value',
                        textStyle: {
                            color: '#999999'
                        }
                    }
                ],
                series: [
                    {
                        name: '录入信息',
                        type: 'bar',
                        barWidth: '50%',
                        data: this_.nums,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: '#3BA1FF',
                                        fontSize: 8
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            // 绘制图表
            //   this.myChart = this.$echarts.init(this.$refs.Histogram2);

            myEchart.setOption(option);
            //   myChart.setOption(option);
        },
         initData4() {
            let this_ = this;
            let myEchart = echarts.init(document.getElementById('chart_example4'));
            let option = {
                color: ['#3BA1FF'], //柱体颜色
                 title: {
    text: '其他成本统计',
 
  },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this_.timms,
                        axisLine: { show: false }, //轴线不显示
                        axisTick: {
                            alignWithLabel: false
                        },
                        axisLabel: {
                            interval: 0, //底部完整显示
                            textStyle: {
                                //修改底部字体颜色
                                color: '#999999'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        show: true, //隐藏y方向刻度
                        type: 'value',
                        textStyle: {
                            color: '#999999'
                        }
                    }
                ],
                series: [
                    {
                        name: '录入信息',
                        type: 'bar',
                        barWidth: '50%',
                        data: this_.nums,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: '#3BA1FF',
                                        fontSize: 8
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            // 绘制图表
            //   this.myChart = this.$echarts.init(this.$refs.Histogram2);

            myEchart.setOption(option);
            //   myChart.setOption(option);
        },
    //  重置
    cz(){

    },
    // 查询
    add(){

    },
    // 列表
    tellbe(){
        let data={
             startTime:this.Time[0],
             endTime:this.Time[1],
             companyId:this.id,
             type:this.activeName
        }
    inputs_getCostTable(data).then((res)=>{
					this.tableData = res.data
				})
    },
    // 导出
        download() {
            const companyId =  localStorage.getItem('companyId')
            const startTime =  this.Time[0]
            const endTime =  this.Time[1]
            const type =  this.activeName
            //  window.location.href = "http://" + window.location.host + "/供应商模版导入.xlsx";
            // window.location.href = "http://47.104.241.124:8901/user/outUser";
            // window.location.href = "http://192.168.0.148:8880/template/toClient?" + companyId
            window.location.href = "http://grove.cpzsyun.com:81/api/plant/inputs/exportCostTable?" + companyId + startTime + endTime + type
        },
       // tabs
            handleClick(tab, event) {
                // if (tab.label == '采购检测') {
                //     this.init1();
                // } else if (tab.label == '加工检测') {
                //     this.init2();
                // }
            },
	   // 分页事件
            handleCurrentChange1(val){
                // this.currentPage1 = val
                // this.init1()
            },
            handleCurrentChange2(val){
                // this.currentPage2 = val
                // this.init2()
            },
             handleCurrentChange3(val){
                // this.currentPage2 = val
                // this.init2()
            },
             handleCurrentChange4(val){
                // this.currentPage2 = val
                // this.init2()
            },
    }
};
</script>

<style lang="less" scoped>
	.applyLoans {
		display: flex;
		flex-wrap:nowrap ;
		justify-content: space-around;
		height:300px;
	}
	.content{
		margin: 20px;
		flex: 1;

		border: 1px solid #999;
		border-radius: 16px;
		overflow-y: hidden;
		padding: 10px;
	}
	.clickAll{
		float: right;
		cursor: pointer;
	}
	.font18{
		font-size: 18px;
		font-weight: 600;
	}
	.dis_in_bl{
		display: inline-block;
	}
	.management{
		margin: 40px 20px 20px 20px;
		flex: 1;
		border: 1px solid #999;
		border-radius: 16px;
		overflow-y: hidden;
		padding: 10px;
	}
	.managementContent{
		display: flex;
		flex-wrap:nowrap ;
		justify-content: space-around;
		height:400px;
	}
    .ecarlist{
        width: 100%;
        height: 250px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
    .ecarlist_cen{
        width: 50%;
       height: 100%;
    }
</style>
